<!DOCTYPE html>
<html>

<head>
  <title>Scroll To Top/Bottom Extension Options</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="options.css">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <h1>Scroll To Top/Bottom Settings</h1>

    <div class="scrollToExt-container" id="scrollButtons">
      <div class="scrollToExt-button" id="previewTopBtn">&#8593;</div>
      <div class="scrollToExt-button" id="previewBottomBtn">&#8595;</div>
    </div>

    <div class="option-group">
      <label>Button Position:</label>
      <div class="position-grid">
        <div class="position-option" data-position="top-left">
          <div class="position-option-icon">&#8598;</div>
          <div>Top Left</div>
        </div>
        <div class="position-option" data-position="top-right">
          <div class="position-option-icon">&#8599;</div>
          <div>Top Right</div>
        </div>
        <div class="position-option" data-position="middle-left">
          <div class="position-option-icon">&#8592;</div>
          <div>Middle Left</div>
        </div>
        <div class="position-option" data-position="middle-right">
          <div class="position-option-icon">&#8594;</div>
          <div>Middle Right</div>
        </div>
        <div class="position-option" data-position="bottom-left">
          <div class="position-option-icon">&#8601;</div>
          <div>Bottom Left</div>
        </div>
        <div class="position-option" data-position="bottom-right">
          <div class="position-option-icon">&#8600;</div>
          <div>Bottom Right</div>
        </div>
      </div>
      <input type="hidden" id="position" value="middle-right">

      <label for="offset">
        Distance from Edge: <span id="offsetValue" class="range-value">20</span>px
      </label>
      <input type="range" id="offset" min="0" max="100" value="20">

      <label for="verticalSpacing">
        Spacing Between Buttons: <span id="verticalSpacingValue" class="range-value">10</span>px
      </label>
      <input type="range" id="verticalSpacing" min="0" max="50" value="10">

      <label for="opacity">
        Normal Opacity: <span id="opacityValue" class="range-value">50%</span>
      </label>
      <input type="range" id="opacity" min="0" max="1" step="0.1" value="0.5">

      <label for="hoverOpacity">
        Hover Opacity: <span id="hoverOpacityValue" class="range-value">100%</span>
      </label>
      <input type="range" id="hoverOpacity" min="0" max="1" step="0.1" value="1">

      <label for="buttonSize">
        Button Size: <span id="buttonSizeValue" class="range-value">40</span>px
      </label>
      <input type="range" id="buttonSize" min="20" max="100" value="40">

      <label>Scroll Behavior:</label>
      <div class="radio-group">
        <div class="radio-option">
          <input type="radio" id="scrollBehaviorSmooth" name="scrollBehavior" value="smooth" checked>
          <label for="scrollBehaviorSmooth">Smooth</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="scrollBehaviorInstant" name="scrollBehavior" value="instant">
          <label for="scrollBehaviorInstant">Instant</label>
        </div>
      </div>


    </div>

    <div class="option-group">
      <h3>Disabled Domains</h3>
      <p>The scroll buttons will not appear on these domains:</p>

      <div class="domain-list" id="domainList">
        <!-- Domains will be added here dynamically -->
        <div class="empty-message">No domains are currently disabled</div>
      </div>

      <div class="add-domain-form">
        <input type="text" id="newDomain" placeholder="Enter a domain (e.g., example.com)" />
        <button id="addDomain">Add Domain</button>
      </div>
    </div>

    <div class="option-group">
      <h3>About</h3>
      <div class="about-section">
        <p style="text-wrap: balance;">This extension is open source software, free to use, modify and distribute under
          the MIT license.</p>
        <p>
          <a href="https://github.com/bulutfatih/better-scroll-to-top-bottom/blob/main/PRIVACY.md"
            target="_blank">Privacy Policy</a>
        </p>
        <p>
          <a href="https://github.com/bulutfatih/better-scroll-to-top-bottom" target="_blank">Source Code</a>
        </p>
        <p>Version: <span id="versionNumber">1.0.0</span></p>
        <p>Copyright © 2025 Better Scroll To Top/Bottom</p>
      </div>
    </div>

    <div class="buttons">
      <button id="reset">Reset to Defaults</button>
      <button id="save">Save Settings</button>
    </div>
  </div>
  <div class="feedback-message" id="feedback"></div>
  <script src="options.js"></script>
</body>

</html>